<template>
    <div class="geo-location">
        <input type="search" name="" id="" v-model="city" 
        placeholder="请输入要搜索的城市名称" @change="getData()">
    </div>
</template>
<script>
import axios from 'axios'
import { API_CITY, KEY } from '@/common/constrant'
import { mapActions } from 'vuex';
export default{
    data(){
        return{
            "city":""
        }
    },
    methods:{
        // ...mapMutations([
        //     "updateLocationMutation"
        // ]),
        ...mapActions([
            "updateLocationAction"
        ]),
        getData(){
            axios.get(API_CITY,{
                params:{
                    key:KEY,
                    location:this.city,
                }
            }).then(res => {
                console.log(res.data)
                //store通过dispatch方法分发action
                // this.$store.dispatch("updateLocationAction",res.data.location[0])
                //使用mapActions辅助函数,将‘this.increment()’映射为this.$store.dispatch("increment")
                this.updateLocationAction(res.data.location[0])
                //此方法是越过了action直接从vue component组件commit提交mutation
                // this.$store.commit("updateLocationMutation",res.data.location[0])
                //使用mapMutation函数
                // this.updateLocationMutation(res.data.location[0])
                console.log(this.$store.state.location)
            })
        }
    },
    // mounted(){
    //     this.getData()
    // }
}
</script>
<style scoped>

</style>